<template>
  <div>
    <el-tree
      :data="depts"
      :props="defaultProps"
      node-key="id"
      :expand-on-click-node="false"
      :render-content="renderContent"
      default-expand-all
    />
    <el-dialog
      title="部门编辑"
      :visible="dialogVisible"
      @close="closeDialog"
    >
      <my-form v-if="dialogVisible" :id="queryID" ref="myForm" :type="type" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleComfirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { reqAddDepartment, updataDepartment } from '@/api/departments.js'
import myForm from './myForm.vue'

export default {
  components: { myForm },
  props: {
    depts: {
      type: Array,
      default: () => []
    },
    showForm: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {

      queryID: '',
      dialogVisible: false,
      type: 'add',
      defaultProps: {
        label: 'name',
        children: 'children'
      }
    }
  },
  watch: {
    showForm(val) {
      if (val) this.dialogVisible = true
    }
  },
  methods: {
    renderContent(h, { node, data, store }) {
      return (
        <span class='custom-tree-node'>
          <span>{node.label}</span>
          <div class='right'>
            <span>{node.data.manager}</span>
            <span>
              <el-dropdown trigger='click'>
                <span class='el-dropdown-link'>
            操作<i class='el-icon-arrow-down el-icon--right'></i>
                </span>
                <el-dropdown-menu slot='dropdown'>
                  <el-dropdown-item >
                    <el-button size='mini' type='text' on-click={ () => this.append(data) }>添加子部门</el-button>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <el-button size='mini' type='text' on-click={ () => this.edit(data) }>编辑子部门</el-button>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <el-button size='mini' type='text' on-click={ () => this.remove(data) }>删除子部门</el-button>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </span>
          </div>
        </span>)
    },
    closeDialog() {
      this.queryID = ''
      this.type = 'add'
      this.$emit('closeForm')
    },
    append({ id }) {
      this.dialogVisible = true
      this.type = 'add'
      this.queryID = id
    },
    edit({ id }) {
      this.type = 'edit'
      this.queryID = id
      this.dialogVisible = true
    },
    async remove({ id }) {
      await this.$store.dispatch('departments/deletePartmentItem', id)
      this.$message.success('删除成功')
    },
    async handleComfirm() {
      try {
        const data = this.$refs.myForm.$data.formData
        await this.$refs.myForm.validForm()
        if (this.type === 'add') {
          await reqAddDepartment(data)
          this.$message.success('添加成功')
        } else {
          await updataDepartment(data)
          this.$message.success('修改成功')
        }
        await this.$store.dispatch('departments/getDepartmentData')
        this.dialogVisible = false
      } catch (error) {
        if (error === '校验未通过') return this.$message.error(error)

        this.$message.error(error)
        this.dialogVisible = false
      }
    }
  }
}
</script>

<style scoped lang='scss'>
::v-deep .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 0px;
  }
::v-deep .right{
    width: 211px;
    display: flex;
    justify-content: space-between;
  padding-right: 60px;
  }
.el-tree {
  ::v-deep {
    // 小三角的样式, 去掉默认的小三角的旋转效果
    .el-tree-node__expand-icon.expanded {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    // 有子节点 且未展开 +
    .el-icon-caret-right:before {
      background: url("~@/assets/common/add-circle.png") no-repeat 0 0;
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }
    // 有子节点 且已展开 -
    .el-tree-node__expand-icon.expanded.el-icon-caret-right:before{
      background: url("~@/assets/common/minus-circle.png") no-repeat 0 0;
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }
    // 没有子节点
    .el-tree-node__expand-icon.is-leaf::before  {
      background: url("~@/assets/common/user-filling.png") no-repeat 0 0;
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }
  }
}
::v-deep .el-dialog__header{
background-color: skyblue;
.el-dialog__title{
color: #fff;
}
}
.el-select{
width: 100%;
}
</style>
